<template>
  <div class="box">
    <div class="grey">header</div>
    <div class="container clearfix">
      <div class="center float">center</div>
      <div class="left float">left</div>
      <div class="right float">right</div>
    </div>
    <div class="grey footer">footer</div>
  </div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.box {
  min-width: 550px;
  .grey {
    background-color: #f1edf0;
    text-align: center;
  }
  .container {
    padding: 0 150px 0 200px;
    .center {
      background-color: #98c3a1;
      width: 100%;
      float: left;
    }
    .right {
      position: relative;
      background-color: red;
      width: 150px;
      float: left;
      margin-left: -150px;
      right: -150px;
    }
    .left {
      position: relative;
      background-color: yellow;
      width: 200px;
      float: left;
      margin-left: -100%;
      left: -200px;
    }
  }
  .footer {
    //clear: both;
  }
  .clearfix::after{
    content: '';
    display: table;
    clear: both;
  }
}
</style>
